<template>
  <div>
    <el-dialog v-model="visible" title="上传用户头像" width="500" draggable>
      <el-row>
        <el-col :span="12" v-if="imageUrl" style="text-align: right;">
          <img v-if="imageUrl"  :src="getOutResource('/oss/doc/userAvatar/'+imageUrl)"  class="avatar" />
        </el-col>
        <el-col :span="imageUrl?12:24">
          <el-upload
            class="avatar-uploader"
            :action=actionURL
            :auto-upload="true"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
            :headers="header"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false" size="small">取消</el-button>
          <el-button type="primary" @click="save" size="small">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/localStorage";
import { ElLoading } from "element-plus";
import { updateAvatar} from '@/api/system/user'
import { baseURL, serverBaseURL } from '@/constant/system.js'
export default {
  data(){
    return{
      actionURL:baseURL+serverBaseURL+"/user/uploadAvatar",
      // 开关
      visible:false,
      // 用户ID
      userId:undefined,
      // 上传的头像地址
      imageUrl:undefined,
      header: { Authorization: getToken() },
      // 上传中
      importLoading:undefined,
    }
  },
  methods:{
    openModal(row){
      // 清空数据
      this.imageUrl = undefined
      this.userId - undefined
      this.visible = true
      this.userId = row.userId
      this.imageUrl = row.avatarPath
    },
    handleAvatarSuccess(res){
      // 上传成功
      if (res.code==1) {
        this.imageUrl = res.data
      }
      this.importLoading.close()
    },
    // 上传前打开上传中的遮罩层
    beforeAvatarUpload(){
      this.importLoading = ElLoading.service({
        text: "数据上传中，请稍候...",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    save(){
      if (!this.isNotBlank(this.imageUrl)) {
        this.$message.error('请上传用户头像')
      } else {
        let param = {
          'userId':this.userId,
          'avatarPath': this.imageUrl
        }
        updateAvatar(param).then(res=>{
          if (res.code == 1) {
            this.$message.success('操作成功')
            this.$store.commit('setUserInfo',{...this.$store.state.userInfo,avatarPath:this.imageUrl})
            this.visible = false
          }
        })
      }
    },
  }
}
</script>
<style scoped>
/deep/.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
/deep/.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
img {
  width: 178px;
  height: 178px;
  border: solid 1px #f7f7f7;
}
.dialog-footer {
  text-align: right;
  margin-right: 10px;
}
</style>